<template>
  <div v-if="menu_data" style="">
    <template v-for="submenu of menu_data">
      <el-submenu class="submenu-class" :index="submenu.index">
        <template slot="title">
          <!-- <i v-if="submenu.icon === ''" class="el-icon-location"></i> -->
          <img style="width:1.5rem;" :src="require('@/assets/icons/small/' + submenu.icon + '.png')" />
          <span slot="title">{{ submenu.title }}</span>
        </template>
        <template v-for="item of submenu.items">
          <el-menu-item class="item-class" :index="item.index">
            <!-- <i v-if="item.icon === ''" class="el-icon-location"></i> -->
            <!-- <i style="width:1.5rem;opacity:0" v-if="item.icon === ''" class="el-icon-location" ></i> -->
            {{ item.title }}
          </el-menu-item>
        </template>
          <template v-if="submenu.submenus && submenu.submenus.length>0">
            <auto-sub-menu :subMenuData="submenu.submenus">
            </auto-sub-menu>
          </template>
      </el-submenu>
    </template>
  </div>
</template>
<style scoped>
.submenu-class {
  color: #6a6a6a;
  /* font-size: 12px; */
  font-family: "Hiragino Sans GB";
  line-height: 30px;
}
.item-class {
  color: #6a6a6a;
  /* font-size: 12px; */
  font-family: "Hiragino Sans GB"
}
</style>
<script>
export default {
  name: 'AutoSubMenu',
  props: ['subMenuData'],
  data () {
    return {
      menu_data: this.subMenuData
    }
  },
  mounted () {
    // console.log(this.menu_data)
  }
}
</script>
